<form nz-form [formGroup]="validateForm" >
<div nz-col [nzSpan]="num">
  <nz-card>
    <ng-template #title>
      <span style="float: left">小节内容</span>
      <a [nzSize]="'large'" style="width: 88px;float: right;line-height: 28px;margin-top: 6px;" nz-button [nzType]="'danger'" (click)="removi(index)">
        <span>{{txt}}</span>
      </a>

    </ng-template>
    <ng-template #body>
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="4">
          <label nz-form-item-required>小节名</label>
        </div>
        <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="getFormControl('chaptername')" nzHasFeedback>
          <nz-input formControlName="chaptername" (nzBlur)="changes()"  [nzType]="'text'" [nzPlaceHolder]="'请输入小节名'" [nzSize]="'large'" >
          </nz-input>
          <div nz-form-explain *ngIf="getFormControl('chaptername').dirty&&getFormControl('chaptername').hasError('required')">请输入小节名!</div>
        </div>
      </div>
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="4">
          <label nz-form-item-required>小节顺序</label>
        </div>
        <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="getFormControl('chaptersort')" nzHasFeedback>
          <nz-select
            formControlName="chaptersort"
            (nzOpenChange)="changes()"
            nzAllowClear
            [nzSize]="'large'"
            [nzPlaceHolder]="'choose'">
            <nz-option
              *ngFor="let item of options"
              [nzLabel]="item.label"
              [nzValue]="item.value">
            </nz-option>
          </nz-select>


          <div nz-form-explain *ngIf="getFormControl('chaptersort').dirty&&getFormControl('chaptersort').hasError('required')">请输入小节顺序!</div>
        </div>
      </div>
      <div nz-form-item nz-row>
        <div nz-col [nzSpan]="4" nz-form-label>
          <label>上传视频</label>
        </div>
        <div nz-col [nzSpan]="12" nz-form-control >
          <ul class="filegroup">
            <li *ngFor="let item of fileLists">
              <img [src]="item.showurl" alt="">
              <nz-tooltip [nzTitle]="item.originalname" [nzPlacement]="'bottom'">
                <p nz-tooltip>{{item.originalname}}</p>
              </nz-tooltip>
              <div>
              <span >
                <i class="anticon anticon-eye seeImg" *ngIf="item.preview!='2'" (click) = "toDos(item.preview,item.showurl,item.id,item.actualsize,item.standardsize)"></i>
                <i [ngClass]="{'tocenter':item.preview=='2'}" class="anticon anticon-delete uploadimgremove" (click)="remove(item.id,6)"></i>
              </span>
              </div>
            </li>
          </ul>
          <a style="line-height: 28px;height: 30px;" nz-button [nzType]="'default'" (click)="showModal('上传视频')">上传视频</a>
        </div>
      </div>
      <input type="hidden" formControlName="video">
      <input type="hidden" formControlName="elecFile">
      <input type="hidden" formControlName="index">
      <div nz-form-item nz-row>
        <div nz-col [nzSpan]="4" nz-form-label>
          <label>上传附件</label>
        </div>
        <div nz-col [nzSpan]="12" nz-form-control >
          <ul class="filegroup">
            <li *ngFor="let item of fileList">
              <img [src]="item.showurl" alt="">
              <nz-tooltip [nzTitle]="item.originalname" [nzPlacement]="'bottom'">
                <p nz-tooltip>{{item.originalname}}</p>
              </nz-tooltip>
              <div>
              <span >
                <i class="anticon anticon-eye seeImg" *ngIf="item.preview!='2'" (click) = "toDos(item.preview,item.showurl,item.id,item.actualsize,item.standardsize)"></i>
                <i [ngClass]="{'tocenter':item.preview=='2'}" class="anticon anticon-delete uploadimgremove" (click)="remove(item.id,7)"></i>
              </span>
              </div>
            </li>
          </ul>
          <a style="line-height: 28px" nz-button [nzType]="'default'" (click)="showModal('文件上传')">上传附件</a>
        </div>
      </div>
      <div  nz-row *ngIf="this.chapterid!=''||this.chid!=''">
        <div  nz-col [nzSpan]="4">
          <label > </label>
        </div>
        <div nz-col [nzSpan]="12" >
          <button style="width: 220px;" nz-button [nzType]="'primary'" [nzSize]="'large'" (click)="changed()">
            <span>提交</span>
          </button>
        </div>
      </div>

    </ng-template>
  </nz-card>
</div>
</form>
<nz-modal [nzWidth]="width" [nzVisible]="isVisible" [nzTitle]="modalTitle" [nzContent]="modalContent" [nzFooter]="modalFooter" (nzOnCancel)="handleCancel($event)">
  <ng-template #modalTitle>
    {{names}}
  </ng-template>
  <ng-template #modalContent style="background-color: #999">
    <iframe *ngIf="names=='文件上传' || names=='上传视频' " style="width: 840px;height: 380px;margin-left: 28px" [src]="src" frameborder="0"></iframe>
    <div *ngIf="names!='文件上传' && names!='上传视频'" style="width: 420px;display: block;margin: 0 auto;background-color: #999" >
      <img style="width: 420px;display: block;margin: 0 auto;"  [src]="seeurl" alt="">
    </div>
  </ng-template>
</nz-modal>
